import { Button, Col, Drawer, Form, Input, Radio, Row, Space, message } from "antd";
import styles from './index.less'
import { useRequest } from "ahooks";

import { Viewer } from '@bytemd/react';
import gfm from '@bytemd/plugin-gfm';
import highlight from '@bytemd/plugin-highlight';//高亮代码块
import mediumZoom from '@bytemd/plugin-medium-zoom';// 缩放图片
import frontmatter from '@bytemd/plugin-frontmatter';// 解析前题
import breaks from '@bytemd/plugin-breaks';
import themePlugin from '../Themes';
import { changeArticleStatus } from "@/services/article";


export default ({
    open,
    close,
    info,
    refresh,
    isCheck,
}) => {
    const [form] = Form.useForm();
    const status = Form.useWatch('status',form)
    const plugins = [
        gfm(),
        highlight(),
        mediumZoom(),
        frontmatter(),
        breaks(),
        themePlugin(),
    ]
    const {run} = useRequest(changeArticleStatus,{
        manual:true,
        onSuccess:()=>{
            refresh()
            message.success('审核成功')
            close();
        }
    })
    return <Drawer
        title="审核文章"
        width={'50%'}
        onClose={close}
        open={open}
        extra={
            <>
            {
                isCheck&&<Space>
                <Button onClick={close}>取消</Button>
                <Button onClick={async () => {
                    const formVal = await form.validateFields();
                    run({
                        ...formVal,
                        message:formVal.message ??'',
                        articleIds:[info.id]
                    })
                }} type="primary">
                    提交
                </Button>
            </Space>
            }
            </>
        }
    >

        <div className={styles.box}>
            {
                isCheck&&<div className={styles.top}>
                <Form form={form} >
                    <Row gutter={16}>
                        <Col span={24}>
                            <Form.Item
                            name="status"
                            label="审核结果"
                            initialValue={2}
                            rules={[
                                {
                                    required: true,
                                    message: '请输入驳回理由',
                                },
                            ]}
                            >
                                <Radio.Group>
                                    <Radio value={2}>通过</Radio>
                                    <Radio value={3}>驳回</Radio>
                                </Radio.Group>
                            </Form.Item>
                        </Col>
                    </Row>
                    {
                        status === 3 &&<Row gutter={16}>
                        <Col span={16}>
                            <Form.Item
                                name="message"
                                label="驳回理由"
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入驳回理由',
                                    },
                                ]}
                            >
                                <Input.TextArea autoSize={{
                                    minRows:2,
                                    maxRows:3,
                                }} showCount maxLength={20} placeholder="请输入驳回理由，以便作者修改" />
                            </Form.Item>
                        </Col>
                    </Row>
                    }
                    
                </Form>
            </div>
            }
            
            <div className={styles.bottom}>
                <h1>{info?.title}</h1>
                <Viewer value={info?.content||''} plugins={plugins} />
            </div>

        </div>

    </Drawer>
}